反应如何使用模式关闭弹出窗口

Question

使用 react-bootstrap，我有一个包含列表的弹出窗口。单击其中一个列表项，它会打开一个模式。

如何在模式打开时关闭弹出窗口？

我试过了：

rootClose 但它不起作用

React Bootstrap - 如何手动关闭 OverlayTrigger，即同时关闭弹出窗口和模态

class TypeColumn extends React.Component {
constructor(props, context) {
    super(props, context);
    this.close = this.close.bind(this);
}

close() {
    this.refs.overlay.hide();
}

render() {
    const popoverClick = (
        <Popover id="popover-trigger-click-root-close">
            <ul>
                <NumberOptions onClick={this.close} />
            </ul>
        </Popover>
    );

    return (
        <OverlayTrigger
            show={show}
            trigger="click"
            placement="bottom"
            overlay={popoverClick}
            ref="overlay"
        >
            <i
                className={columnTypeIcon} aria-hidden="true"
            />
        </OverlayTrigger>
    );
}
}

class NumberOptions extends React.Component {
constructor(props) {
    super(props);
    this.open = this.open.bind(this);

    this.state = {
        showModal: false,
    };
}

open() {
    this.setState({ showModal: true });
    this.props.onClick();
}

render() {
    return (
        <div>
            <li
                data-value={DATA_TYPES.NUMBER}
                onClick={this.open}
            >
                Options nombre
            </li>

            <Modal
              show={showModal}
              dialogClassName={styles.customModal}
            >
            ...
            </Modal>
        </div>
    );
}
}

Answer 1

由于您的组件 Modal 是 NumberOptions 的子组件，因此当 NumberOptions 关闭时 Modal 也会关闭。

因此您需要将 Modal 分量至少提升到与 OverlayTrigger 相同的水平。

反应如何使用模式关闭弹出窗口

React how to close a popover with a modal

javascript

reactjs

popover

react-bootstrap